<template>
  <div class="iframe-container" v-loading="loading">
    <iframe v-if="src" :src="src" ref="iframeBox" id="iframe_box" @load="loaded" frameborder="0" width="100%" height="100%"></iframe>
    <div v-if="!src && loading" class="iframe_none">无连接地址~</div>
  </div>
</template>

<script>
import { getExpires } from '@/utils/auth'
import aes from '@/utils/aes'
export default {
  data() {
    return {
      loading: false,
      src: '',
      iframeWin: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const _url = this.$route.meta.iframeurl
      if (_url) {
        this.src = this.getUrl(_url)
        this.loading = true
        this.$nextTick(() => {
          this.iframeWin = this.$refs.iframeBox.contentWindow
        })
      }
    },
    getUrl(url) {
      let tokenData = {
        accessToken: this.$store.state.user.token,
        expires: getExpires()
      }
      const tokenEncrypt = encodeURIComponent(aes.AESEncrypt(JSON.stringify(tokenData)))
      const _url = url.indexOf('?') >= 0 ? url + '&' : url + '?'
      return _url + 'token=' + tokenEncrypt
    },
    loaded() {
      // console.log('iframe loaded!!!')
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.iframe-container{
  height: calc(100vh - 50px);
}
.iframe_none{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 14px;
  color: #666;
}
</style>
